<template>
  <el-dialog :title="title" top="5vh"   :visible.sync="visible" :width="width" :close-on-click-modal='false' class="bonus  fix-height">
    <el-row :gutter="20" v-loading="loading">
      <el-col :xs="24" :sm="24" :md="6">
          <!--左侧机构树组件-->
          <org-tree-by-dept ref="orgTreeByDept" @sendCurrentOrg="getCurrentOrg" :height="380"></org-tree-by-dept>
       </el-col>
      <el-col :xs="24" :sm="24" :md="10">
        <div class="search-form">
          <el-form :inline="true" >
            <el-form-item label="人员编号" class="txt-bold">
              <el-input placeholder="人员编号" v-model="searchForm.name" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="searchHandle" type="primary" plain>搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          v-loading="tableLoadingUser"
          :data="tableDataUser"
          height="calc(100vh - 380px)"
          border
          @row-click="selectUser"
          :row-class-name="rowClass"
          style="width: 100%">
          <el-table-column width="55" label="序号" align="center" header-align="center">
            <template slot-scope="scope">
              {{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column
            prop="personCode"
            label="员工编号"
            min-width="100">
          </el-table-column>

          <el-table-column
            prop="personName"
            label="姓名"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="部门"
            show-overflow-tooltip
            min-width="100">
            <template slot-scope="scope">
              <span>{{scope.row.deptName}}</span>
              <span class="nav">
                  <i class="el-icon-caret-right"> </i>
                </span>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="page.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.pageSize"
            :total="page.total"
            background
            layout="prev, pager, next"
          >
          </el-pagination>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8">
          <div class="title">已选择人员</div>
          <el-table :data="selectUserTableData" border ref="ry-table" stripe height="calc(100vh - 340px)">
            <el-table-column width="55" label="序号" align="center" header-align="center">
              <template slot-scope="scope">
                {{scope.$index + 1}}
              </template>
            </el-table-column>
            <el-table-column prop="personName" label="姓名" >
            </el-table-column>
            <el-table-column prop="deptName" label="部门">
            </el-table-column>
            <el-table-column  label="操作" width="100" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button @click="delSelectPerson(scope.$index)" type="danger" plain>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer" >
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary"  @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getUserOfDeptById} from "@/api/bonus/calculateuserconfig";
import orgTreeByDept from "@/views/bonusmanage/components/orgTreeByDept";
export default {
  name: "orgForm",
  components:{
    orgTreeByDept
  },
  props:{
    loading:{
      type:Boolean,
      default:false
    }
  },
  computed: {

  },
  watch: {

  },
  data(){
    return{
      title:'选择人员',
      width:'80%',
      visible: false,
      tableData:[],
      searchForm: {
        name: '',
      },
      tableLoadingUser:false,
      page:{
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableDataUser: [],
      selectUserTableData:[],
    }
  },
  methods:{
    async init(type,selectUserTableData){
      this.type = type
      this.selectUserTableData = selectUserTableData || [] ;
      if (type == 'edit'){
        this.title = '编辑人员'
      }else if(type == 'add'){
        this.title = '新增人员'
      }
      this.$nextTick(()=>{
        this.$refs.orgTreeByDept.getJiangJinJg() ;
      })
      this.visible = true ;
    },
    handleSubmit(){
        if (this.selectUserTableData.length == 0){
          this.$message.error('请选择人员')
          return ;
        }
        this.$emit('sendUserData',this.selectUserTableData)
    },
    handleCancel(refresh){
      this.visible = false ;
      if (refresh){
        this.$emit('refresh')
      }
    },
    rowClass(){
      return "rowNavigation" ;
    },
    onChange(){

    },
    searchHandle(){

    },
    getCurrentOrg(item){
      this.currentOrg = item ; //当前点击的部门
      this.onLoad() ;
    },
    onLoad(){
      this.tableLoadingUser = true ;
      getUserOfDeptById(Object.assign({
        current: this.page.currentPage,
        size: this.page.pageSize
      },{DeptBaseId:this.currentOrg.id})).then(res=>{
        if (res.data.code == 0){
          this.tableDataUser = res.data.data.records
          this.page.total = res.data.data.total ;
          this.page.currentPage = res.data.data.current ;
        }else{
          this.$message.error(res.data.msg)
        }
        this.tableLoadingUser = false ;
      }).catch(()=>{
        this.tableLoadingUser = false ;
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val;
      this.page.currentPage = 1;
      this.onLoad() ;
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.currentPage = val;
      this.onLoad() ;
    },
    selectUser(currentSelectUser){

      let selected = false ; //是否已经选了
      this.selectUserTableData.map(item=>{
         if (currentSelectUser.id == item.id ) {
           selected = true ;
         }
      })

      if (selected){
        this.$message.warning('该员工已被选择')
        return
      }
      this.selectUserTableData.push(currentSelectUser)
    },
    delSelectPerson(index){
      this.selectUserTableData.splice(index,1)
    },
  }
}
</script>

<style scoped>
.avue-crud__pagination{
  padding-top: 10px;
}
.title{    font-size: 16px;
  font-weight: bold;
  color: #303133;
  padding: 10px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid rgb(176, 189, 226);}
</style>
